<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue v-for click</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div id="v-OnClick">
    <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
    </ol>
    <button v-on:click="addItem"> v-on:click</button>
</div>
<hr>

<div id="atClick">
    <ol>
        <li v-for="item in groceryList">{{item.text}}</li>
    </ol>
    <button @click="addItemAt">@click</button>
</div>
<hr>


<div >
    <ul id="sayhi">
        <li v-on:click="say('hello!', $event)" style="background-color:blue;color:white;">点击当前行获取下一行</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</div>


<script>

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })

    var v_onClick = new Vue({
        el: '#v-OnClick',
        data: {
            groceryList: [
                {text: 'Vegetables'},
                {text: 'Cheese'},
            ]
        },
        methods: {
            addItem: function () {
                v_onClick.groceryList.push({text: msg + "v-on:click"})
            }
        }
    })

    var at_click = new Vue({
        el: '#atClick',
        data: {
            groceryList: [
                {text: 'Cheese'},
                {text: 'Whatever else humans are supposed to eat'}
            ]
        },
        methods: {
            addItemAt: function () {
                this.groceryList.push({text: "a different template--- @click"})
            }
        }
    })
    var say = new Vue({
        el: '#sayhi',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            say: function(msg, event) {
                //获取点击对象
                var el = event.currentTarget;
                var li2text = $(el).next().text();
                alert("当前对象的内容："+$(el).text()+" 下一行内容："+li2text);
            }
        }
    })


</script>
</body>
</html>
